#include("/template/common/layout/_page_layout.html")
#@layout()

#define css()
<style>

</style>
#end

#define content()
<div class="layui-fluid">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top:30px;color: #009688;">
        <legend style="font-size: 20px;font-weight: 500;">组织机构资料</legend>
    </fieldset>


    <form id="person" class="layui-form x-center" action="">
        <div class="layui-form-pane">

            <div class="layui-form-item">
                <label class="layui-form-label"style="width: 180px">登录账号</label>
                <div class="layui-input-inline" style="width: 270px;">
                    <input type="text" id="user.name" name="user.name" value="#(user.name)"
                           class="layui-input"  readonly/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 180px">组织机构名称</label>
                <div class="layui-input-inline" style="width: 270px;">
                    <input type="text" id="organization.name" name="organization.name" value="#(organization.name)"
                           class="layui-input " readonly required/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" for="organization.code"style="width: 180px">组织机构代码</label>
                <div class="layui-input-inline" style="width: 270px;">
                    <input type="text" id="organization.code" name="organization.code" value="#(organization.code)"
                           class="layui-input " readonly required/>
                </div>
                <div class="layui-form-mid layui-word-aux">由十八位的阿拉伯数字或大写英文字母组成的全国组织机构统一社会信用代码。例如：91512081MA62K0260E</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" for="organization.addr"style="width: 180px">组织机构地址</label>
                <div class="layui-input-inline" style="width: 270px;">
                    <input type="text" id="organization.addr" name="organization.addr" value="#(organization.addr)"
                           class="layui-input " readonly required/>
                </div>
                <div class="layui-form-mid layui-word-aux">包含省市区县的详细组织机构注册所在地址，组织机构地址由3-128个字符构成。例如：贵州省贵阳市南明区**路**大厦</div>
            </div>

            <div class="layui-form-item" >
                <label class="layui-form-label" for="organization.principal"style="width: 180px">委办负责人姓名</label>
                <div class="layui-input-inline" style="width: 270px;">
                    <input type="text" id="organization.principal" name="organization.principal"
                           value="#(organization.principal)" class="layui-input" readonly required/>
                </div>
                <div class="layui-form-mid layui-word-aux">组织机构的委办负责人的真实姓名，由2-20个字符构成</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" for="organization.contact"style="width: 180px">委办负责人联系方式</label>
                <div class="layui-input-inline" style="width: 270px;">
                    <input type="tel" id="organization.contact" name="organization.contact"
                           value="#(organization.contact)" class="layui-input" readonly required/>
                </div>
                <div class="layui-form-mid layui-word-aux">手机号码（11位数字）</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" for="user.email" style="width: 180px">邮箱</label>
                <div class="layui-input-inline" style="width: 270px;">
                    <input type="email" id="user.email" name="user.email" value="#(user.email)"
                           class="layui-input" readonly required/>
                </div>
                <div class="layui-form-mid layui-word-aux">在各邮件服务商处注册和经常使用的邮箱，邮箱长度最大为60个字符。例如：demo@qq.com</div>
            </div>
            <div class="layui-progress layui-hide" style="margin-bottom:10px" lay-showpercent="true" id="upload-progress" lay-filter="upload-progress" >
                <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label x-center"style="width: 180px"><em class="require-mark">*</em>营业执照</label>
                <div class="layui-input-inline layui-upload">
                    <button type="button" class="layui-btn layui-disabled" disabled="disabled" name="upload"
                            id="upload"><i class="layui-icon"></i>上传文件
                    </button>
                    #if(organization.certificate != null)
                    <button type="button" class="layui-btn see">查看</button>
                    #else
                    <button type="button" class="layui-btn layui-hide see" id="see">查看</button>
                    #end
                </div>
            </div>

            <!--隐藏获取空值repwd作为更新验证器忽略密码字段验证的先决条件-->
            <input type="text" id="rePwd" name="rePwd"
                   class="layui-input layui-disabled layui-hide" required/>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-hide" lay-submit lay-filter="sub">保存</button>
                    <button class="layui-btn layui-btn-warm layui-hide" id="reset">取消</button>
                    <button class="layui-btn layui-btn-normal" id="edit">编辑</button>
                </div>
            </div>

        </div>
    </form>
    <hr>
</div>

#end

#define js()
<script type="text/javascript">

    layui.use(['form', 'layer', 'upload','element'], function () {
        var layer = layui.layer
            , $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , form = layui.form;

        //创建监听函数
        var xhrOnProgress=function(fun) {
            xhrOnProgress.onprogress = fun; //绑定监听
            //使用闭包实现监听绑
            return function() {
                //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                var xhr = $.ajaxSettings.xhr();
                //判断监听函数是否为函数
                if (typeof xhrOnProgress.onprogress !== 'function')
                    return xhr;
                //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                if (xhrOnProgress.onprogress && xhr.upload) {
                    xhr.upload.onprogress = xhrOnProgress.onprogress;
                }
                return xhr;
            }
        }


        var fileID = '#(fileId)';

        $(".see").click(function () {
            if (fileID === '') {
                layer.msg("您还未上传营业执照！");
                setTimeout(1000);
            } else {
                pop_show('查看文件', '#(ctxPath)/util/pdfView?fileID=' + fileID, '', '', function () {
                });
            }
        });

        upload.render({
            elem: '#upload'
            , url: '#(ctxPath)/util/uploadFile'
            , accept: 'file'
            , exts: 'pdf|png|jpeg|jpg'
            ,xhr:xhrOnProgress
            ,progress:function(value){//上传进度回调 value进度值
                element.progress('upload-progress', value+'%')//设置页面进度条
            }
            , data: {
                description: "组织机构营业执照"
            } , before: function (res) {
                $('#upload-progress').removeClass('layui-hide');
            }, done: function (res) {
                <!--$('.loading-bg').remove();-->
                $('#upload-progress').addClass('layui-hide');
                if (res.code == 0) {
                    $.post('#(ctxPath)/app/organization/upload?fileId=' + res.data.fileId + '&tableName=organization&fieldName=营业执照', function () {
                        layer.msg("上传成功");
                        $('#upload').text('已上传');
                        fileID = res.data.fileId;
                        $('.see').removeClass('layui-hide');
                    });
                } else if (res.code == 1) {
                    layer.msg("文件上传失败，请重新选择上传！");
                    setTimeout(function () {
                    }, 1000);
                }
            }
            , error: function (index, upload) {
                $('#upload-progress').addClass('layui-hide');
                alert("文件上传错误！请重新尝试！");
            }
        });

        form.on('submit(sub)', function (data) {
            util.sendAjax({
                type: 'POST',
                url: '#(ctxPath)/app/organization/update',
                data: $.param(data.field),
                loadFlag: true,
                success: function (data) {
                    layer.msg('编辑成功');
                    $(".layui-btn").addClass("layui-hide");
                    $("#edit").removeClass("layui-hide");
                    $(":input").addClass("layui-disabled").prop("disabled", "disabled");
                    $("#edit").removeClass("layui-disabled");
                    window.location.reload();
                    setTimeout(function () {
                        return true;
                    }, 3000);
                },
                error: function (data) {
                    console.log(data);
                }
            });
            return false;
        });

        $('#edit').click(function () {
            $(":input[disabled='disabled']").removeClass("layui-disabled").removeProp("disabled");
            $(".layui-btn").removeClass("layui-hide");
            $("button[name='upload']").removeClass("layui-disabled").removeProp("disabled");
            document.getElementById("upload").disabled=false;
            $(this).addClass("layui-hide");
            return false;
        });

        $('#reset').click(function () {
            $(".layui-btn").addClass("layui-hide");
            $("#edit").removeClass("layui-hide");
            $(":input").addClass("layui-disabled").prop("disabled", "disabled");
            window.location.reload();
        });
    });


</script>
#end